<%-- 
    Document   : testarDataTAble
    Created on : 21/Dez/2014, 17:20:39
    Author     : a21210380 a21210392
    Trabalho PD - 2014/2015
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!DOCTYPE html>
<html>
    <head>
        <!--our website contains characters from the Unicode character set, a superset of the ASCII character set-->
        <meta charset="utf-8">

        <!--Using the following code snippet would force IE to use the latest rendering engine to render our website-->
        <meta http-equiv="X-UA-Compatible" content="IE=edge">

        <!--We tell the browser to scale our application to the size of window space available:-->
        <!--initial-scale=1 in the code means scale it to 100%-->
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Ver clientes</title>

        <link rel="stylesheet" type="text/css" href="<c:url value="resources/css/bootstrap.css" />">
        <link rel="stylesheet" type="text/css" href="<c:url value="resources/css/jquery.dataTables.css" />">
        <link rel="stylesheet" type="text/css" href="<c:url value="resources/css/styles.css" />">

        <style>
            td.details-control {
                color: blue;
            }
            td.edit-control {
                color: green;
            }
            td.delete-control {
                color: red;
            }
        </style>

    </head>
    <body>

        <div class="container">
            <div class="row">
                <div class="panel panel-info">
                    <div class="panel-heading">Ultimas viagens criadas</div>
                    <table id="table_id" class="table table-striped table-bordered">
                        <thead>
                            <tr>
                                <th></th>
                                <th></th>
                                <th></th>
                                <th>Name</th>
                                <th>Age</th>
                                <th>Address</th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>


        <script src="<c:url value="resources/js/jquery.js" />"></script>
        <script src="<c:url value="resources/js/jquery.dataTables.js" />"></script>
        <script src="<c:url value="resources/js/bootstrap.js" />"></script>
        <script src="<c:url value="resources/js/mytable.js" />"></script>

        <script>
            $(document).ready(function () {
                var table = $('#table_id').DataTable({
                    ajax: {
                        url: "/Trabalho_PD/webresources/RestFulTeste/testes",
                        type: "GET",
                        dataSrc: "testes"
                    },
                    columns: [
                        {
                            "className": 'details-control',
                            "orderable": false,
                            "data": null,
                            "defaultContent": 'Abrir'
                        },
                        {
                            "className": 'edit-control',
                            "orderable": false,
                            "data": null,
                            "defaultContent": 'Editar'
                        },
                        {
                            "className": 'delete-control',
                            "orderable": false,
                            "data": null,
                            "defaultContent": 'Eliminar'
                        },
                        {data: 'name'},
                        {data: 'age'},
                        {data: 'address'}
                    ]

                });

                // Add event listener for opening and closing details
                $('#table_id tbody').on('click', 'td.details-control', function () {
                    var tr = $(this).closest('tr');
                    var row = table.row(tr);

                    if (row.child.isShown()) {
                        // This row is already open - close it
                        row.child.hide();
                        tr.removeClass('shown');
                    }
                    else {
                        // Open this row
                        row.child(format(row.data())).show();
                        tr.addClass('shown');
                    }
                });

                // Add event listener for opening and closing details
                $('#table_id tbody').on('click', 'td.edit-control', function () {
                    var tr = $(this).closest('tr');
                    var row = table.row(tr);

                    if (row.child.isShown()) {
                        // This row is already open - close it
                        row.child.hide();
                        tr.removeClass('shown');
                    }
                    else {
                        // Open this row
                        row.child(format2(row.data())).show();
                        tr.addClass('shown');
                    }
                });

            });



        </script>
    </body>
</html>
